<template>
  <div class="wode">
    <!-- 导航栏NavBar -->
    <van-nav-bar  @click-left="fhy" title="我" left-arrow>
      <template #right> <router-link to="/shezhi"><van-icon name="setting-o" /></router-link> </template>
    </van-nav-bar>
    <!-- <div v-if="!$store.state.islogin"> -->
    <!-- <div>
      <van-empty image="error" description="请登录">
        <van-button round type="danger" class="bottom-button" to="/login">登录</van-button>
      </van-empty>
    </div> -->
    <!-- <div v-else> -->
    <div>
      <!-- 头部个性签名 -->
      <div class="avatar">
        <!-- 布局----------------------------------------- -->
        <van-row type="flex" align="center" justify="center">
          <!-- 第一个图 -->
          <van-col span="6">
            <van-image
              round
              width="6rem"
              height="6rem"
              :src="gxt"
              class="gxt"
            />
          </van-col>
          <!-- 第二个只读 -->
          <van-col span="12">
            <van-cell-group width="20">
              <van-field :value="gxqm" readonly />
            </van-cell-group>
          </van-col>
          <!-- 第三个要弹框显示改变内容 -->
          <van-col span="3">
            <!-- 弹框按钮 -->
            <van-cell @click="showPopup"><van-icon name="plus" /></van-cell>
            <!-- 弹框的内容 -->
            <van-popup
              v-model="show"
              closeable
              close-icon="close"
              position="bottom"
              :style="{ height: '30%' }"
            >
              <van-cell-group>
                <van-field value="个新签名(12个字)" readonly />
                <van-field v-model="valuei" clearable left-icon="smile-o" />
                <van-button type="info" @click="shangchuan" block
                  >上传</van-button
                >
              </van-cell-group>
            </van-popup>
            <!-- <van-button icon="plus" type="info" @click="crgxqm"/> -->
          </van-col>
        </van-row>
        <!-- --------------------------------------------- -->
      </div>
      <!-- 收藏 足迹 消息 联系客服 -->
      <div class="szxl">
        <van-row>
          <van-col span="6" v-for="(item, i) of wode" :key="i">
            <router-link :to="`/${item.tiao}`"
              ><p><van-icon :name="item.name" dot /></p>
              <p>{{ item.title }}</p></router-link
            >
          </van-col>
        </van-row>
        <!--  <van col span="6">-->
        <!-- 内容:[{name:1,title:2}] -->
      </div>
      <!-- 如果购物车没有清空了name就不能用了 -->
      <!-- <div v-if="a"></div> -->
      <!-- 商品信息到哪了 -->
       <!-- <div class="dnl" v-else> -->
      <div class="dnl" >
        <van-steps :active="activednl">
          <van-step>买家下单</van-step>
          <van-step>商家接单</van-step>
          <van-step>买家提货</van-step>
          <van-step>交易完成</van-step>
        </van-steps>

        <!-- 公共的开始计算 -->
        <van-button block @click="dnlks">开始</van-button>
        <!-- 具体位置 -->

        <van-steps direction="vertical" :active="activednl">
          <van-step>
            <h3>【深圳】物流状态1</h3>
        <!-- <p><van-count-down :time="time"/></p> -->
            <p v-once>开始发货时间:{{$moment().format('YYYY-MM-DD HH:mm:ss')}}</p>
          </van-step>
          <van-step>
            <h3>【上海】物流状态2</h3>
            <!-- <p><van-count-down :time="time" /></p> -->
            <p>{{$moment().format('YYYY-MM-DD HH:mm:ss')}}</p>
          </van-step>
          <van-step>
            <h3>【北京】物流状态2</h3>
            <!-- <p><van-count-down :time="time" /></p> -->
            <p>{{$moment().format('YYYY-MM-DD HH:mm:ss')}}</p>
          </van-step>
          <van-step>
            <h3>快到了注意查收</h3>
            <!-- v-once<p><van-count-down :time="time" /></p> -->
            
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gxqm: "个性签名",//个性签名
      show: false,//弹框内容
      valuei: "你的个性",//下面上传的字
      gxt:require("../assets/wcf/iii.jpg"),
      //收藏
      wode: [
        { name: "label-o", title: "收藏", tiao: "shoucang" },
        { name: "flag-o", title: "足迹", tiao: "zuji" },
        { name: "smile-comment-o", title: "消息", tiao: "xiaoxi" },
        { name: "bullhorn-o", title: "联系客服", tiao: "lianxikefu" },
      ],
      //到哪了
      activednl: 0,
      //时间到了
      // time: 30 * 60 * 60 * 1000,
      // kssj:new Data().toLocaleString(),
      // kssj:""
      item:0,
    };
  },
  /////////////////监视///////////////////////////////////
  watch: { },
  //////////////////////////////////////////
  methods: {
    //点击弹窗
    showPopup() {this.show = true;},
    shangchuan() {
      console.log(`上传${this.valuei}`);
      if (this.gxqm != "") {
        this.gxqm = this.valuei;
      }
      this.show = false;
      //如果输字后点击函数 就把gxqm清空  之后在上传输的内容
    },
    //返回到哪
    fhy(){
      this.$router.push('/fenlei')
    },
    //到哪了开始 
    dnlks() {
      // this.activednl++;
      let a = setInterval(() => {
        this.activednl++;
        if (this.activednl ==3) {
          clearInterval(a);
        }
        console.log(this.activednl);
      }, 2000);

    },

    
  },
};
</script>
<style>
/* 个性签名旁边的图 */
.wode .avatar .gxt {
  margin:3px ;
}
/* 头部个性签名 大的地方 */
.wode .avatar {
  width: 100%;
  background-color: rgb(123, 183, 253);
}
/* 登录样式 */
.wode .bottom-button {
  width: 160px;
  height: 40px;
}
/* 收藏足迹消息框 */
.wode .szxl {
  padding-top: 10px;
}
.wode .szxl p {
  text-align: center;
  padding: 0;
  margin: 0;
  /* border-right: 1px solid red; */
}
/* 到哪了的分支 */
.wode .dnl {
  text-align: justify;
}
</style>
